import { useIntersectionObserver } from '@vueuse/core';

// 成功提示
export const msgSuccess = function (message) {
	ElMessage({ showClose: true, message, type: 'success' });
};

// 失败提示
export const msgError = function (message) {
	ElMessage({ showClose: true, message, type: 'error' });
};

// 警告提示
export const msgWarning = function (message) {
	ElMessage({ showClose: true, message, type: 'warning' });
};

// 信息提示
export const msgInfo = function (msg) {
	ElMessage(msg);
};

// 提交确认
export const confirm = function (data) {
	let options = {};
	if (typeof data === 'string') {
		options.item = data;
	} else {
		options = { ...data };
	}

	const {
		item = '是否确认导出所有数据项？',
		title = '提示',
		confirmButtonText = '确定',
		cancelButtonText = '取消',
		type = 'warning',
		...props
	} = options;
	return new Promise((resolve, reject) => {
		ElMessageBox.confirm(item, title, {
			showCancelButton: false,
			confirmButtonText,
			cancelButtonText,
			draggable: true,
			type,
			...props
		})
			.then((res) => {
				resolve(res);
			})
			.catch((err) => {
				reject(err);
			});
	});
};

/**
 * 封装一个通用的方法实现数据的懒加载
 * @param {DOM} target表示组件的最外层div元素
 * @returns
 */
export const useLazyData = function (target, callBack) {
	// 监听组件是否进入可视区
	const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
		// 如果target对应的DOM进入可视区，那么该回调函数就触发
		if (isIntersecting) {
			// 被监听的DOM进入了可视区:此时调用接口获取数据；停止继续监听
			stop();
			// 回调函数
			if (callBack) callBack();
		}
	});
};
